<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSPang</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                sth: 1,
                message: 2,
                aa: ""
            }
        },
        template: `  
        <div>
            {{sth}}
            <input v-model="sth" />
            <button @click="()=>{this.sth+=1}">+1</button>
        </div>
        <div>
        {{message}}
        <input 
            v-bind:value="message" 
            v-on:input="message=$event.target.value"
        />
        
        <button @click="()=>{this.message+=1}">+1</button>
        </div>

        <div>
            <aa-input v-model="aa"></aa-input>
        </div>
        <div>
        </div>
        `
    })
    app.component("aa-input", {
        data(){
            return {
                value:""
            }
        },
        template: `
        {{aa}}<input v-bind:value="aa" v-on:input="onmessage"></aa-input>`,

        props: ["aa"],
        methods: {
            onmessage(e) {
                $emit('input', e.target.value)
            }
        }


    })
    const vm = app.mount("#app")
</script>